<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Record</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="format-detection" content="telephone=no" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-touch-fullscreen" content="yes" />
<!-- <link rel="stylesheet" type="text/css" href="css/main.css" /> -->
</head>

<body>
<style>
.detail {
    width: 980px;
    margin: 0 auto;
}
.detail .pie {
    float: left;
    width: 200px;
    height: 200px;
    margin: 0 30px 0 0;
    border-radius: 50%;
    text-align: center;
    background: #eee;
}
.detail .pie strong {
    height: 200px;
    line-height: 200px;
    font-size: 50px;
    color: #666;
}
.detail .info {
    float: left;
}
.detail .meta {
    padding: 10px 5px;
    margin: 0;
    border-bottom: solid 1px #ddd;
}
.detail .list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.detail .list li {
    padding: 10px 5px;
    margin: 0;
    border-bottom: solid 1px #ddd;
}
.detail .list span {
    display: inline-block;
    min-width: 80px;
}
</style>
<div class="detail" id="detail">
    <div class="info">
        <div class="meta">
            <span class="date">Oct. 10</span>
        </div>
        <div class="records">
            <div class="title"><h3>项目</h3>
                <a class="add" href="javascript:;">+</a>
            </div>
            <ul class="list">
                <li>
                    <label class="type">
                        <select name="type">
                            <option value="running">跑步</option>
                            <option value="walking">暴走</option>
                            <option value="swimming">游泳</option>
                            <option value="bike">骑车</option>
                        </select>
                    </label>
                    <label class="time">
                        <select name="time">
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="10">10</option>
                            <option value="15">15</option>
                            <option value="20">20</option>
                        </select>
                        <small>min</small>
                    </label>
                    <label class="count">
                        <select name="count">
                            <option value="0.1">0.1</option>
                            <option value="0.2">0.2</option>
                            <option value="0.3">0.3</option>
                            <option value="0.4">0.4</option>
                            <option value="0.5">0.5</option>
                            <option value="0.6">0.6</option>
                            <option value="0.7">0.7</option>
                            <option value="0.8">0.8</option>
                            <option value="0.9">0.9</option>
                            <option value="1.0">1.0</option>
                        </select>
                        <small>km</small>
                    </label>
                    <input type="submit" value="save" />
                </li>
                <li>
                    <span class="type">跑步</span>
                    <span class="time">30 <small>min</small></span>
                    <span class="kcal">1500 <small>kcal</small></span>
                    <a class="btn-edit" href="javascript:;">edit</a>
                </li>
                <li>
                    <span class="type">游泳</span>
                    <span class="time">15 <small>min</small></span>
                    <span class="kcal">500 <small>kcal</small></span>
                </li>
            </ul>
        </div>
        <div class="mood">
            <h3>状态</h3>
            <ul>
                <li><a href="javascript:;" data-mood="2">兴奋</a></li>
                <li><a href="javascript:;" data-mood="1">愉悦</a></li>
                <li><a href="javascript:;" data-mood="0">一般</a></li>
                <li><a href="javascript:;" data-mood="-1">不佳</a></li>
                <li><a href="javascript:;" data-mood="-2">糟糕</a></li>
            </ul>
        </div>
        <div class="summary">
            <h3>日记</h3>
            <div class="">
                <p>其实这是思维方式的转变，所以误入歧途是不可避免的，而其中最多的误解在于Scope。Scope本身是作为在控制器中的模板作用域，实际效果就是Scope上的属性在模板中可以直接使用，无论是在花括号还是Angular的表达式中，比如指令中。但开发人员很容易被其表面所迷惑</p>
            </div>
            <div class="editor">
                <textarea name="summary" rows="3" cols="50"></textarea>
                <input type="submit" value="save" />
            </div>
        </div>
    </div>
</div>
</body>
</html>